function TodoItem({ onTodoComplete, onTodoDelete, title, id, completed }: any) {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <input type="checkbox" checked={completed} />
      <span style={{ textDecoration: completed ? 'line-through' : 'none' }}>{title}</span>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <button onClick={() => { onTodoComplete(id) }}>切换</button>
        <button onClick={() => { onTodoDelete(id) }}>Delete</button>

      </div>
    </div>
  )
}

export default TodoItem